<template>
  <div class="saveMch">
    <el-dialog :title="mch_id?$t('saveMerchant.edit'):$t('saveMerchant.add')" :visible.sync="showDialog"
               :showMchInfo="showMchInfo" @open="open" @close='hidden'>
      <el-form class="small-space" ref="merchantForm" label-position="right" label-width="8rem" :model="mchDetail" :rules="rules">
        <el-row>
          <el-col :sm="12" :offset="6">
            <el-form-item :label="$t('saveMerchant.name')" prop=".name">
              <el-input v-model="mchDetail.name" :placeholder="$t('saveMerchant.enter_name')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('saveMerchant.key')" prop=".api_key">
              <el-input v-model="mchDetail.api_key" :disabled="mch_id?true:false" :placeholder="$t('saveMerchant.enter_key')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:showMchInfo', false)">{{$t('saveMerchant.cancel')}}</el-button>
        <el-button v-if="mch_id" type="primary" :loading="loading" @click="updateMchInfo">{{$t('saveMerchant.save')}}</el-button>
        <el-button v-else type="primary" :loading="loading" @click="saveMchInfo">{{$t('saveMerchant.save')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {comparativeData} from '@/utils/patch'
  import {getMchDetail, saveMerchant, updateMerchant} from '@/api/merchant'
  export default {
    name: 'UserSet',
    data() {
      return {
        showDialog: this.showMchInfo,
        loading: false,
        mchDetail: {},
        olddata: {},
        switchArray: this.$store.state.app.switchArray,
        rules: {
          name: [
            { required: true, message: this.$t('saveMerchant.enter_name'), trigger: 'change' }
          ],
          api_key: [
            { required: true, message: this.$t('saveMerchant.enter_key'), trigger: 'change' }
          ]
        }
      }
    },
    props: {
      showMchInfo: {
        type: Boolean,
        default: false
      },
      mch_id: {
        type: Number
      }
    },
    created(){
      if (this.mch_id) {
        this.getMchDetail()
      }
    },
    methods: {
      isValidateForm(){
        let isValid = false

        this.$refs['merchantForm'].validate((valid) => {
            if(valid) {
                isValid = true;
            }
        })

        return isValid
      },
      saveMchInfo(){
        if(!this.isValidateForm()) {
          return
        }

        saveMerchant(this.mchDetail).then(res => {
          if (res.status === 0) {
            this.$message({message: this.$t('saveMerchant.add_success'), type: 'success'})
            this.$emit('update:showMchInfo', false)
          } else {
            this.$message.error(res.data.msg)
          }
        })
      },
      updateMchInfo(){
        if(!this.isValidateForm()) {
          return
        }

        let newdata = comparativeData(this.mchDetail, this.olddata)
        updateMerchant(newdata, this.mch_id).then(res => {
          if (res.status === 0) {
            this.$message({message: this.$t('saveMerchant.update_success'), type: 'success'})
            this.$emit('update:showMchInfo', false)
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      getMchDetail(){
        getMchDetail(this.mch_id).then(res => {
          if (res.status === 0) {
            this.mchDetail = res.data
            this.olddata = JSON.stringify(res.data)
          }
        })
      },
      open() {
        if(this.modalOrderData.action === 'Edit'){
          this.rules.name[0].message = this.$t('saveMerchant.enter_name')
          this.rules.api_key[0].message = this.$t('saveMerchant.enter_key')
        }
      },
      hidden() {
        this.$emit('update:showMchInfo', false)
        this.$refs['merchantForm'].resetFields();
      }
    },
    watch: {
      showMchInfo() {
        this.showDialog = this.showMchInfo
      }
    }
  }

  
export const enSaveMerchant = {
  add: 'Add Merchant',
  edit: 'Edit Merchant',
  name: 'Merchant Name: ',
  key: 'Merchant Key: ',
  enter_name: 'Please Enter Merchant Name...',
  enter_key: 'Please Enter Merchant Key',
  cancel: 'Cancel',
  save: 'Save',
  add_success: 'Added successfully.',
  update_success: 'Modified successfully.'
}

export const zhSaveMerchant = {
  add: '修改商户',
  edit: '新增商户',
  name: '商户名称：',
  key: '商户密钥：',
  enter_name: '请输入商户名称...',
  enter_key: '请输入商户密钥...',
  cancel: '取 消',
  save: '确 定',
  add_success: '新增成功。',
  update_success: '修改成功。'
}
</script>

<style lang="scss">
  .saveMch{
    .el-dialog { min-width: 940px }
    .ChannelType {
      .el-tabs__nav {
        margin: 0 8rem
      }

      .el-button {
        color: #ffffff;
        width: 2.5rem;
        margin: 0.1rem;
        padding: 0.5rem 0;
        text-align: center;
        span {
          margin-left: 0;
        }
      }

      .el-button + .el-button {
        margin-left: 0.1rem;
      }

      .el-button:hover {
        color: #b1b1b1;
      }

    }

  }
</style>
